<template>
  <div class="child-manage">
    <div class="list" v-show="lists && lists.length>0">
      <div v-for="(item,index) in lists" :key="index" class="item" @click="router({path: './editChild',query:{uid:id,id:item.id}})">
        <p>{{item.txt}}</p>
        <img src="@/assets/mdhzgl02.png" alt="">
      </div>
    </div>
    <none v-show="lists.length <= 0"></none>
    <div class="add-btn">
      <span class="btn" @click="router({path: './editChild',query:{uid:id}})">添加孩子</span>
    </div>
  </div>
</template>

<script>
  import none from "@/components/none"
  import {childlist} from '@/api/api'
  export default {
    components: {
      none,
    },
    data () {
      return {
        lists:[]
      }
    },
    created () {
      this.id = this.$route.query.id
      this.child()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      child(){
        childlist(this.id,'',1,20).then((res) =>{
          this.lists=res.data.info
        }).catch((err) => {
          console.dir(err)
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.child-manage
  min-height 100vh
  background-color #f5f5f5
  padding-bottom 6rem
  box-sizing border-box
  .item
    position relative
    line-height 6rem
    height 6rem
    font-size 1.5rem
    color #333
    padding-left 1.5rem
    background-color #fff
    margin-bottom 1rem
    img
      position absolute
      width 1.7rem
      right 1.5rem
      top 2rem
  .add-btn
    position fixed
    bottom 0
    width 100%
    background-color #fff
    box-shadow 1px 3px 7px rgba(0,0,0,.2)
    padding 1rem 4%
    height 6rem
    box-sizing border-box
    .btn
      display block
      height 4rem
      line-height 4rem
      color #fff
      border-radius 100px
      background-color #172F6D
      font-size 1.5rem
      text-align center
      width 100%
</style>
